<template>
  <div>
    <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      fixed
    />
    <van-swipe-cell v-for="(n, index) in order_all" :key="index">
      <van-card
        :num="n.order_selectedNum"
        :price="n.order_price"
        :title="n.goods_txt"
        :desc="n.order_info"
        class="goods-card"
        :thumb="n.order_imgUrl"
      >
        <template #tags>
          <van-tag plain type="danger">经济</van-tag>
          <van-tag plain type="danger">实惠</van-tag>
        </template>
        <template #footer>
          <van-button size="mini" @click="buy(n, index)">购买</van-button>
          <van-button size="mini" @click="deleted(index)">删除</van-button>
        </template></van-card
      >
      <template #right>
        <van-button
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="deleted(index)"
        />
      </template>
    </van-swipe-cell>

    <Tabbar></Tabbar>
    <van-empty description="去添加点什么吧" />
  </div>
</template>

<script>
import { Dialog } from "vant";
export default {
  data() {
    return {
      order_all: this.$store.state.order_all,
    };
  },
  methods: {
    // 删除
    deleted(index) {
      Dialog.confirm({
        title: "删除",
        message: "是否删除",
      }).then(() => {
        this.$store.commit("muOrder_deleted", index);
      }) .catch(() => {
    // on cancel
  });
    },
    onClickLeft() {
      this.$router.back();
    },
    // 购买
    buy(n, index) {
      console.log(n, index);

      let pay_all = {
        pay_imgUrl: n.order_imgUrl,
        pay_info: n.order_info,
        pay_price: n.order_price,
        pay_selectedNum: n.order_selectedNum,
      };
      Dialog.confirm({
        title: "购买",
        message: "是否购买",
      }).then(() => {
        this.$router.push("/pay");
        this.$store.commit("muChangePay_all", pay_all);
        this.$store.commit("muOrder_deleted_index", index);
      }) .catch(() => {
    // on cancel
  });;
    },
  },
};
</script>

<style scoped>
.goods-card {
  margin-top: 1.2rem;
  background-color: white;
}

.delete-button {
  height: 100%;
}
</style>